<template>
    <div class="comment" :class="{ 'w375': fun.isPc() }">
        <c-title text="全部评价"></c-title>

        <div class="tips" v-if="list.length<=0">
            <img :src="img_url" style="width: 7.1875rem;height: 7.1875rem;margin: 3.5625rem auto 0.2188rem;" alt="">
            <div style="font-size: .75rem;color: #8E8E95;">暂无数据</div>
        </div>
        <div class="content" v-for="item in list" :key="item.id">
            <div class="content-head">
                <div class="flex-center">
                    <img :src="item.member.avatar" alt="">
                    <div>
                        <div class="nick-name">{{ item.member.nickname }}</div>
                        <div class="level">{{ item.member.level_name }}</div>
                    </div>
                </div>
                <div class="time">{{ item.created_at }}</div>
            </div>
            <div class="content-txt">
                {{ item.content }}
            </div>
            <div class="pic">
                <img v-for="c_item in item.images_url" :src="c_item" alt="" />
            </div>
            <div class="flex-center" style="justify-content: space-between;">
                <div class="flex-center">
                    <span class="time">评分：</span>
                    <div class="flex-center">
                        <i v-for="score_item in 5"
                            :class="score_item <= item.score ? 'iconfont  icon-fontclass-pingfen current' : 'iconfont  icon-fontclass-pingfen'"></i>
                    </div>
                </div>
                <div class="time">评论数：{{ item.count_child }}</div>
            </div>
        </div>

        <div class="evaluate-box" :class="{ 'pc-box': fun.isPc() }">
            <div @click="goto" class="evaluate-btn">参与评价</div>
        </div>
    </div>
</template>
<script>
import { scrollMixin } from "utils/mixin.js";
export default {
    mixins: [scrollMixin],
    data() {
        return {
            isLoadMore: true,
            list: [],
            page: 1,
            total_page: 0,
            img_url:"",
        }
    },
    activated() {
        this.img_url = window.location.origin + '/static/local/kaipin-laboratory/empty.png'
        this.isLoadMore = true;
        this.getData();

    },
    methods: {
        getData(page = 1) {
            $http.post('plugin.kaipin-laboratory.frontend.product-plaza.get-all-comment', { id: this.$route.params.id, page }, '').then(res => {
                this.isLoadMore = true;
                if (res.result) {
                    let data = res.data;
                    this.list = page == 1 ? data.data : this.list.concat(data.data);
                    this.page = data.current_page;
                    this.total_page = data.last_page;
                }
            })
        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.total_page) return;
            let page = this.page + 1;
            this.getData(page);
        },
        goto() {
            this.$router.push(this.fun.getUrl("kaipin_publish_comment", { id: this.$route.params.id }))
        },
    }
}
</script>
<style lang="scss" scoped>
.pic {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    img {
        width: 4.375rem !important;
        height: 4.375rem !important;
        margin: 0 .5rem .5rem 0 !important;
        border-radius: .25rem !important;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

.pcStyle .evaluate-btn {
    left: auto;
}

.evaluate-btn {
    background-color: var(--themeBaseColor);
    border-radius: 1.2813rem;
    font-size: 0.875rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-weight: bold;
    color: #FFFFFF;
}

.pc-box {
    width: 375px;
    left: 50% !important;
    transform: translateX(-50%);
}

.evaluate-box {
    padding: 0.25rem .4375rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #fff;
}

.w375 {
    position: relative;
    width: 375px;
}

.comment {
    padding-bottom: 3.0625rem;

    .current {
        color: var(--themeBaseColor) !important;
    }

    .icon-fontclass-pingfen {
        font-size: 0.6875rem;
        color: #D6D6DC;
        margin-right: .0938rem;
    }

    .content-txt {
        font-weight: 400;
        font-size: 0.8125rem;
        color: #00001C;
        line-height: 1.125rem;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: .4063rem;
    }

    .flex-center {
        display: flex;
        align-items: center;
    }

    .time {
        font-weight: 400;
        font-size: 0.75rem;
        color: #8E8E95;
    }

    .content-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .625rem;
    }

    img {
        width: 2.25rem;
        height: 2.25rem;
        margin: 0 .2813rem 0 0;
        border-radius: 100%;
    }

    .level {
        font-weight: 400;
        font-size: 0.75rem;
        line-height: 1;
        color: #8E8E95;
        text-align: left;
    }

    .nick-name {
        text-align: left;
        font-weight: bold;
        font-size: 0.875rem;
        color: #00001C;
        line-height: 1;
        margin-bottom: .1875rem;
    }

    .content {
        margin: .625rem .75rem;
        background-color: #fff;
        padding: .75rem .75rem 1.1875rem;
        border-radius: 0.625rem;
    }


    .tips {

        .tips-bpx {
            width: 7.1875rem;
            height: 7.1875rem;
            border-radius: 50%;
            background: linear-gradient(180deg, #ECECF0 0%, rgba(239, 239, 239, 0) 100%);
        }
    }

    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        height: 3.0625rem;
        padding: .2813rem .4375rem;

        button {
            display: block;
            background-color: #F15353;
            border-radius: 1.2813rem;
            text-align: center;
            font-weight: 500;
            font-size: 0.875rem;
            color: #FFFFFF;
            width: 100%;
            height: 100%;
            border: none;
        }
    }
}
</style>